<!--
 * @Author: your name
 * @Date: 2020-07-14 18:10:44
 * @LastEditTime: 2020-07-18 17:28:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \SY2020-6-14\src\views\settings\minganshijianguanli\minganshijianguanli.vue
--> 
<template>
  <div>
    <Row type="flex" align="top" justify="center">
      <Col span="2" pull="2">
            <Row type="flex" align="middle">
              <Col span="1">
                <div class="nl-square"></div>
              </Col>
              <Col span="17">敏感时间管理</Col>
            </Row>
          </Col>
      <Col span="10" pull="1">
        <div id="calendar">
          <!-- 年份 月份 -->
          <div class="month">
            <ul>
              <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
              <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
              <li class="year-month" @click="pickYear(currentYear,currentMonth)">
                <span class="choose-year">{{ currentYear }}年</span>
                <span class="choose-month">{{ currentMonth }}月</span>
              </li>
              <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
            </ul>
          </div>
          <!-- 星期 -->
          <ul class="weekdays">
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li style="color:red">六</li>
            <li style="color:red">日</li>
          </ul>
          <!-- 日期 -->
          <ul class="days">
            <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
            <li v-for="dayobject in days">
              <!--本月-->
              <!--如果不是本月  改变类名加灰色-->

              <span
                v-if="dayobject.day.getMonth()+1 != currentMonth"
                class="other-month"
              >{{ dayobject.day.getDate() }}</span>

              <!--如果是本月  还需要判断是不是这一天-->
              <span v-else>
                <!--今天  同年同月同日-->
                <span
                  v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
                  class="active"
                >{{ dayobject.day.getDate() }}</span>

                <span
                  v-else-if="dayobject.day.getDate()==7||dayobject.day.getDate()==17||dayobject.day.getDate()==24"
                  @click="modal2"
                >
                  {{ dayobject.day.getDate()}}
                  <span style="font-size:1px;font-weight:bold;">(敏感)</span>
                </span>
                <span v-else>{{ dayobject.day.getDate()}}</span>
              </span>
            </li>
          </ul>
        </div>
        <Modal v-model="modal1" title="发生的敏感时间" @on-ok="ok" @on-cancel="cancel">
          <p>敏感信息</p>
        </Modal>
      </Col>
      <Col  span="8" push="1" style="margin-top: 2%;">
        <List item-layout="vertical" border>
          <ListItem v-for="item in data" :key="item.title">
            <ListItemMeta
              :avatar="item.avatar"
              :title="item.title"
              :description="item.description"
            />
            {{ item.content }}
          </ListItem>
        </List>
      </Col>
    </Row>
  </div>
</template>
<style scoped>
ul {
  list-style-type: none;
}
body {
  font-family: Verdana, sans-serif;
  background: #e8f0f3;
}
#calendar {
  width: 110%;
  height: 80%;
  margin-top: 4%;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.month {
  width: 100%;
  background: rgb(25, 25, 82);
}
.month ul {
  display: flex;
  justify-content: space-between;
}
.year-month {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.year-month:hover {
  background: rgba(150, 2, 12, 0.1);
}
.choose-year {
  font-size: 55px;
  padding-left: 20px;
  padding-right: 20px;
}
.choose-month {
  text-align: center;
  font-size: 55px;
}
.arrow {
  padding: 30px;
}
.arrow:hover {
  background: rgba(100, 2, 12, 0.1);
}
.month ul li {
  color: white;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.weekdays {
  margin: 0;
  padding: 10px 0;
  font-size: 32px;
  background-color: rgb(25, 25, 82);
  display: flex;
  flex-wrap: wrap;
  color: #ffffff;
  justify-content: space-around;
}
.weekdays li {
  display: inline-block;
  width: 13.6%;
  text-align: center;
}
.days {
  padding: 0;
  background: #ffffff;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.days li {
  list-style-type: none;
  display: inline-block;
  width: 14.2%;
  text-align: center;
  padding-bottom: 20px;
  padding-top: 20px;
  font-size: 2.5rem;
  color: #000;
}
.days li .active {
  padding: 6px 10px;
  border-radius: 50%;
  background: rgb(25, 25, 82);
  color: #fff;
}
.days li .other-month {
  padding: 5px;
  color: gainsboro;
}
.days li:hover {
  background: #e1e1e1;
}
.layout-con {
  height: 100%;
  width: 100%;
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
.nl_name {
  color: #ffffff;
}
.nl_name:nth-child(1) {
  margin-top: 0.5rem;
}
.send-news {
  margin-bottom: 10px;
}
.nl-user {
  background: white;
  box-shadow: 0 0 10px #dcdee2;
  height: 50px;
}
.nl-square {
  width: 3px;
  height: 13px;
  background: #3431ec;
}
/* .ivu-menu-dark {
  background: #191952;
} */
.nl-left {
  background: #191952;
}
/* .ivu-menu-submenu:hover {
  background: #3b3994;
}
.ivu-menu-item{
  background: #0c0c35 !important;
}
.ivu-menu-item:hover{
  background: #0d0d3d !important;
}
/* 选中时的样式 */
/*.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title{
  background: #191952 !important;
}  */
.nl-page {
  margin-top: 10px;
}
.nl-logoname {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.nl-newsCuration-row {
  margin-bottom: 10px;
}
/* 旋转 */
.aa {
  transition: all 0.2s;
  transform-origin: 50% 45%;
}
.go {
  transform: rotate(-180deg);
  transition: all 0.2s;
  transform-origin: 50% 45%;
}
/* table th样式 */
.ivu-table-header th {
  color: red !important;
}
</style>
<script>
export default {
  data() {
    return {
      isCollapsed: false,
      modal1: false,
      nowData: [],
      remind: "(11)",
      currentDay: 1,
      currentMonth: 1,
      currentYear: 1970,
      currentWeek: 1,
      days: [],
      data: [
        {
          title: "事件1",
          // description:
            // "This is description, this is description, this is description.",
          // avatar:
          //   "https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar",
          content:
            "事件1内容"
        },
        {
          title: "事件2",
          // description:
          //   "事件2内容",
          // avatar:
          //   "https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar",
          content:
            "事件2内容"
        },
        {
          title: "事件3",
          // description:
          //   "This is description, this is description, this is description.",
          // avatar:
          //   "https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar",
          content:
            "事件3内容"
        }
      ]
    };
  },
  created() {
    this.initData(null);
    this._getData();
  },
  methods: {
    modal2() {
      console.log("1111");
      this.modal1 = true;
      console.log(this.modal1);
    },
    ok() {
      this.$Message.info("点击了确定");
    },
    cancel() {
      this.$Message.info("点击了取消");
    },
    initData: function(cur) {
      var leftcount = 0; //存放剩余数量
      var date;

      if (cur) {
        date = new Date(cur);
      } else {
        var now = new Date();
        var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
        d.setDate(35);
        date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
      }
      this.currentDay = date.getDate();
      this.currentYear = date.getFullYear();
      this.currentMonth = date.getMonth() + 1;

      this.currentWeek = date.getDay(); // 1...6,0
      if (this.currentWeek == 0) {
        this.currentWeek = 7;
      }
      var str = this.formatDate(
        this.currentYear,
        this.currentMonth,
        this.currentDay
      );
      this.days.length = 0;
      // 今天是周日，放在第一行第7个位置，前面6个
      //初始化本周
      for (var i = this.currentWeek - 1; i >= 0; i--) {
        var d = new Date(str);
        d.setDate(d.getDate() - i);
        var dayobject = {}; //用一个对象包装Date对象  以便为以后预定功能添加属性
        dayobject.day = d;
        this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
      }
      //其他周
      for (var i = 1; i <= 35 - this.currentWeek; i++) {
        var d = new Date(str);
        d.setDate(d.getDate() + i);
        var dayobject = {};
        dayobject.day = d;
        this.days.push(dayobject);
      }
    },
    pickPre: function(year, month) {
      // setDate(0); 上月最后一天
      // setDate(-1); 上月倒数第二天
      // setDate(dx) 参数dx为 上月最后一天的前后dx天
      var d = new Date(this.formatDate(year, month, 1));
      d.setDate(0);
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    pickNext: function(year, month) {
      var d = new Date(this.formatDate(year, month, 1));
      d.setDate(35);
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    pickYear: function(year, month) {
      alert(year + "," + month);
    },

    // 返回 类似 2016-01-02 格式的字符串
    formatDate: function(year, month, day) {
      var y = year;
      var m = month;
      if (m < 10) m = "0" + m;
      var d = day;
      if (d < 10) d = "0" + d;
      return y + "-" + m + "-" + d;
    },

    test(name) {
      console.log(name);
      this.$router.push({ name: name });
    },
    // 菜单打开
    handleOpen() {
      this.visible = true;
    },
    //菜单关闭
    handleClose() {
      this.visible = false;
    },
    //所有数据
    _getData() {
      //获取data1
      this.data1 = [];
      this.nowData = [];
      //将数据填入data1
      for (let i = 0; i < 1; i++) {
        let a = {
          serial: i,
          title: "fasfddsafd",
          startTime: "2014-05-06 01:14:41",
          otherFile: "中新生态城需求分析文档.docx"
        };
        this.data1.push(a);
      }
      //分页显示所有数据总数
      this.dataCount = this.data1.length;
      //循环展示页面刚加载是需要的数据条数
      // this.nowData = [];
      // for (let i = 0; i < this.pageSize; i++) {
      //   this.nowData.push(this.data1[i]);
      // }
      let _start = (this.pageCurrent - 1) * this.pageSize;
      let _end = this.pageCurrent * this.pageSize;
      this.nowData = this.data1.slice(_start, _end);
    },
    //点击，切换页面
    changepage(index) {
      let _start = (index - 1) * this.pageSize;
      let _end = index * this.pageSize;
      this.nowData = this.data1.slice(_start, _end);
      this.pageCurrent = index;
      this._getData();
    }
    //每页显示的数据条数
  },
  computed: {
    menuitemClasses: function() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  }
};
</script>

